.base {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--cui-spacings-kilo) var(--cui-spacings-mega);
  margin: 0;
  color: var(--cui-fg-normal);
  text-align: left;
  text-decoration: none;
  background-color: var(--cui-bg-normal);
  border: var(--cui-border-width-mega) solid var(--cui-border-subtle);
  border-radius: var(--cui-border-radius-mega);
}

.base:disabled,
.base[disabled] {
  color: var(--cui-fg-normal-disabled);
  pointer-events: none;
  background-color: var(--cui-bg-normal-disabled);
  border-color: var(--cui-border-subtle-disabled);
}

/* Interactive */

a.base,
button.base {
  cursor: pointer;
}

a.base:hover,
button.base:hover {
  color: var(--cui-fg-normal-hovered);
  background-color: var(--cui-bg-normal-hovered);
  border-color: var(--cui-border-subtle-hovered);
}

a.base:focus,
button.base:focus {
  z-index: 2;
  outline: 0;
  border-color: transparent;
  box-shadow:
    0 0 0 4px var(--cui-bg-normal),
    0 0 0 6px var(--cui-border-focus);
}

a.base:focus::-moz-focus-inner,
button.base:focus::-moz-focus-inner {
  border: 0;
}

a.base:focus:not(:focus-visible),
button.base:focus:not(:focus-visible) {
  z-index: auto;
  border-color: var(--cui-border-subtle);
  box-shadow: none;
}

a.base:active,
button.base:active {
  color: var(--cui-fg-normal-pressed);
  background-color: var(--cui-bg-normal-pressed);
  border-color: var(--cui-border-subtle-pressed);
}

.base[aria-current="true"] {
  background-color: var(--cui-bg-accent);
}

.base[aria-current="true"]:hover,
.base[aria-current="true"]:active {
  background-color: var(--cui-bg-accent);
}

.base[aria-current="true"]::after {
  position: absolute;
  top: calc(-1 * var(--cui-border-width-mega));
  right: calc(-1 * var(--cui-border-width-mega));
  bottom: calc(-1 * var(--cui-border-width-mega));
  left: calc(-1 * var(--cui-border-width-mega));
  z-index: 1;
  pointer-events: none;
  content: "";
  border: var(--cui-border-width-mega) solid var(--cui-border-accent);
  border-radius: var(--cui-border-radius-mega);
}

.leading {
  display: flex;
  flex: none;
  margin-right: var(--cui-spacings-mega);
}

.content {
  display: flex;
  flex: auto;
  align-items: center;
  min-width: 0;
}

.main {
  display: flex;
  flex: auto;
  flex-direction: column;
  gap: var(--cui-spacings-bit);
  align-items: flex-start;
  min-width: 0;
}

.label {
  max-width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.details {
  display: flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--cui-body-m-line-height);
}

.trailing {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--cui-spacings-bit);
  align-items: flex-end;
  align-self: stretch;
  justify-content: center;
  margin-left: var(--cui-spacings-mega);
}

.trailing.has-label {
  justify-content: flex-start;
}

.navigation .trailing {
  margin-right: calc(-1 * var(--cui-spacings-bit));
}

.chevron {
  display: flex;
  align-items: center;
}

/* When the chevron is preceded by other content */
.navigation .chevron svg:not(:first-child) {
  margin-left: var(--cui-spacings-bit);
}

.navigation .trailing .details {
  height: var(--cui-body-m-line-height);
  margin-right: calc(var(--cui-spacings-mega) + var(--cui-spacings-bit));
}
